import React, { useState } from 'react'
import classNames from 'classnames'
import Icon from '../Icon/icon'
import Transition from '../Transition/transition'
export type AlertType = 'success' | 'default' | 'danger' | 'warning'
export interface AlertProps {
  title: string
  description?: string
  type?: AlertType
  onClose?: () => void // 关闭alert时触发的事件
  closable?: boolean // 是否显示关闭按钮
}

export const FuckingAlert = ({
  title,
  description,
  type = 'default',
  onClose,
  closable = true // 是否显示关闭按钮
}: AlertProps) => {
  const [hide, setHide] = useState(false)
  const groupRef = React.useRef(null)
  const classes = classNames('dog-alert', {
    [`dog-alert-${type}`]: type
  })
  const titleClass = classNames('dog-alert-title', {
    'bold-title': description
  })
  const handleClose = (e: React.MouseEvent) => {
    onClose?.()
    setHide(true)
  }
  return (
    <Transition in={!hide} timeout={300} animation="zoom-in-top" nodeRef={groupRef}>
      <div className={classes} ref={groupRef}>
        <span className={titleClass}>{title}</span>
        {description && <p className="dog-alert-desc">{description}</p>}
        {closable && (
          <span className="dog-alert-close" onClick={handleClose}>
            <Icon icon="times" />
          </span>
        )}
      </div>
    </Transition>
  )
}

export default FuckingAlert
